<template>
    <div class="my-header">
      <div>
        <div>
          <div class="mh_tb">
            <router-link to="/" class="mh-img">
              <img src="../assets/logo_one.png"/>
            </router-link>
            <router-link to="/" class="xsptb">心食谱·新味道</router-link>
          </div>
          <div>&nbsp;</div>
          <div class="mh_ss">
            <!-- <div style="position: relative;line-height:50px">
              <input type="text">
              <router-link to="/recipexx">
                <img src="/search.png" alt="">
              </router-link>
            </div> -->
            <div class="mh_ss_box">
              <div class="mh_ss_input_bnt">
                <input class="mh_ss_input" type="text" v-model="sousz" @keyup.enter="xq1(sousz)">
              </div>
              <router-link :to="`/recipemh/${sousz}`" style="text-decoration: none;display: inline-block;" v-if="sousz">
                <img class="mh_ss_img" src="/img/sou_suo.png" alt="">
              </router-link>
              <router-link to="/recipelb" style="text-decoration: none;display: inline-block;" v-else>
                <img class="mh_ss_img" src="/img/sou_suo.png" alt="">
              </router-link>
            </div>
           
          </div>
          <div class="mh_right">
            <a @click="setfs(fsbiaoshow=!fabiaoshow);setls(loginshow=false);setis(indexshow=false)">新食谱</a>
            <a>|</a>
            <router-link to="/recipelb" :class="{active:$route.path=='/recipelb'}">美食屋</router-link>
          
            <!-- <router-link to="/">新食谱</router-link> -->
            <!-- <router-link to="/">梦餐厅</router-link> -->
            <!-- <router-link to="/details" :class="{active:$route.path=='/details'}">分类</router-link> -->
            
            <!-- <router-link to="/userphb" :class="{active:$route.path=='/userphb'}">排行榜</router-link> -->
            <router-link to="/userphb" :class="{active:$route.path=='/userphb'}">美食家</router-link>
            <router-link to="/gonggao" :class="{active:$route.path=='/gonggao'}">公告栏</router-link>
            <a>|</a>
            <template v-if="this.$store.state.loginname1">
              <router-link to="/userzy">
                <img :src="this.$store.state.loginname1" alt="" class="renwutx">
              </router-link>
            </template>
            <template v-else>
              <a @click="setls(loginshow=!loginshow);setis(indexshow=false);setfs(fabiaoshow=false)">登录</a>
              <a @click="setis(indexshow=!indexshow);setls(loginshow=false);setfs(fabiaoshow=false)">注册</a>
            </template>
          </div>
        </div>
      </div>
      <div class="boxx"></div>
      <logind/>
      <index/>
      <!-- 显示发表时，将姓名传过去 -->
      <fa-biao :username="loginname"/>
    </div>
</template>
<script>
import Logind from '@/views/Logind.vue'
import { mapMutations, mapState } from 'vuex'
import Index from '@/views/Index.vue'
import FaBiao from '@/views/FaBiao.vue'
  export default {
  components: { Logind, Index, FaBiao },
  computed:{
    ...mapState(["loginshow"]),
    ...mapState(["indexshow"]),
    ...mapState(["fabiaoshow"]),
    ...mapState(["loginname"]),
    ...mapState(["loginname1"],["backcolor"]),
  },
    data() {
      return {
        // hide: false
        sousz:null,
      }
    },
    methods: {
      ...mapMutations(["setls"]),
      ...mapMutations(["setis"]),
      ...mapMutations(["setfs"]),
      ...mapMutations(["settx"]),
      // ...mapMutations(["updateys"]),
      //回车查询信息
      xq1(sousz){
        if(sousz){
          this.$router.push("/recipemh/"+sousz)
        }else{
          this.$router.push("/recipelb")
        }
      }
    },
    watch: {
      $route(newValue, oldValue) {
        console.log(this.$route)
      },
      // backcolor(){
      //   console.log(this.backcolor)
      // }
    },
  }
</script>

<style lang="scss" scoped>
.renwutx{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  transform: scale(1.5);
  top: 5px;
}
.mh_ss{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 4px;
}
.mh_ss_box{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 7px;
}
.mh_ss_img{
  width: 20px;
  height: 20px;
  margin-top: 4px;
  padding: 5px 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
  background-color: #ffe851;
}
.mh_ss_input_bnt{
   width: 360px;
  height: 30px;
  background-color: white;
}
.mh_ss_input{
  width: 340px;
  height: 30px;
  padding-left: 8px;
  border: none;
  outline: none;
}
  .my-header{
    width: 100%;
    margin: 0 auto;
    margin-top: -8px;
  }
  .my-header>div:last-child{
    height: 55px;
  }
  .my-header>div:first-child{
    width: 100%;
    max-height: 55px;
    position: fixed;
    // background-color: #494848;
    background-image: linear-gradient(rgb(61, 60, 60),rgb(114, 113, 113));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    >div{
      width: 1200px;
      min-width: 1200px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .mh_tb{
        display: flex;
        img{
          margin-top: 8px;
          height: 50px;
        }
        a:last-child{
          display: inline-block;
          height: 30px;
          margin-top: 24px;
          color: #ffffff;
        }
        .xsptb{
          font-family: 汉仪程行简;
          font-size: 20px;
        }
      }
      .mh_right{
        margin-top: 3px;
        a{
          color: #f5f3f0;
          font-size: 14px;
          margin-right: 10px;
          cursor: pointer; 
          &:hover{
            color: #ff8251;
          }
          &.active{
            color: #ff8251;

          }
        }
      }
    }
  }
</style>